<div style="font-size: 12px;display: flex;align-items: center;">
    日期规则
    <div class="spacer"></div>
    <a nz-button nzType="link" nzDanger (click)="delItem()">
        <i class="iconfont icon-delete-bin-5-line"></i>
    </a>
    <a nz-button nzType="link" nz-popover [nzPopoverTitle]="autoCodeAddTitle" [nzPopoverContent]="autoCodeAddContent"
        nzPopoverTrigger="click">
        <i class="iconfont icon-add-circle-line"></i>

        <ng-template #autoCodeAddTitle>
            更多操作
        </ng-template>
        <ng-template #autoCodeAddContent>
            <div class="btn-more">
                <a nz-button nzType="link" (click)="addAutoItem('auto')">
                    <i class="iconfont icon-add-circle-line"></i>
                    新增自定义
                </a>
                <a nz-button nzType="link" (click)="addAutoItem('date')">
                    <i class="iconfont icon-add-circle-line"></i>
                    新增日期规则
                </a>
                <a nz-button nzType="link" (click)="addAutoItem('separator')">
                    <i class="iconfont icon-add-circle-line"></i>
                    新增分隔符
                </a>
            </div>

        </ng-template>
    </a>
</div>
<nz-input-group [nzAddOnAfter]="addOnAfterTemplate">
    <input type="text" nz-input [ngModel]='orgItem.value' />
</nz-input-group>
<ng-template #addOnAfterTemplate>
    <div style="display: flex;">
        <i class="iconfont icon-settings-3-line" nz-popover [nzPopoverTitle]="titleTemplate"  [(nzPopoverVisible)]="visible" 
            [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click"></i>
    </div>
</ng-template>

<ng-template #titleTemplate>
    <div class="p-5">
        日期规则
    </div>
</ng-template>
<ng-template #contentTemplate>
    <div nz-row class="margin-b">
        <div nz-col nzSpan="6" class="txt-center">
            年
        </div>
        <div nz-col nzSpan="18">
            <nz-select (ngModelChange)="selectChange('showYear', $event)" [(ngModel)]="orgItem.showYear" class="full-row">
                <nz-option [nzValue]="true" nzLabel="显示"></nz-option>
                <nz-option [nzValue]="false" nzLabel="不显示"></nz-option>
            </nz-select>
        </div>
    </div>

    <div nz-row class="margin-b">
        <div nz-col nzSpan="6" class="txt-center">
            月
        </div>
        <div nz-col nzSpan="18">
            <nz-select (ngModelChange)="selectChange('showMonth', $event)" [(ngModel)]="orgItem.showMonth" class="full-row">
                <nz-option [nzValue]="true" nzLabel="显示"></nz-option>
                <nz-option [nzValue]="false" nzLabel="不显示"></nz-option>
            </nz-select>
        </div>
    </div>

    <div nz-row class="margin-b">
        <div nz-col nzSpan="6" class="txt-center">
            日
        </div>
        <div nz-col nzSpan="18">
            <nz-select (ngModelChange)="selectChange('showDay', $event)" [(ngModel)]="orgItem.showDay" class="full-row">
                <nz-option [nzValue]="true" nzLabel="显示"></nz-option>
                <nz-option [nzValue]="false" nzLabel="不显示"></nz-option>
            </nz-select>
        </div>
    </div>

    <div nz-row class="margin-b">
        <div nz-col nzSpan="6" class="txt-center">
            间隔符
        </div>
        <div nz-col nzSpan="18">
            <nz-select (ngModelChange)="selectChange('separatorChar', $event)" [(ngModel)]="orgItem.separatorChar" class="full-row"
                style="width: 100%;">
                <nz-option nzValue="+" nzLabel="+"></nz-option>
                <nz-option nzValue="-" nzLabel="-"></nz-option>
                <nz-option nzValue="/" nzLabel="/"></nz-option>
                <nz-option nzValue="" nzLabel="无"></nz-option>
            </nz-select>
        </div>
    </div>

    <div>
        注：新建项目/任务时，编码将会显示新建当天的年/月/日
    </div>

    <nz-divider></nz-divider>

    <div class="txt-center-h full-row">
        <button nz-button nzType="primary" (click)="ok()">
            确定
        </button>
    </div>
</ng-template>